<template>
  <div id="main">
    <div class="header_box">
      <ul>
        <li>登录</li>
        <li>退出登录</li>
        <li>我的订单</li>
        <li>会员中心</li>
        <li>帮助中心</li>
        <li>关于我们</li>
        <li>手机版</li>
      </ul>
    </div>
    <div class="nav_box">
      <div class="nav_content">
        <div class="logo_box">
          <img src="../assets/img/logo.png" />
        </div>
        <ul>
          <li>首页</li>
          <li>居家</li>
          <li>美食</li>
          <li>服饰</li>
          <li>母婴</li>
          <li>个护</li>
          <li>严选</li>
          <li>数码</li>
          <li>运动</li>
          <li>杂项</li>
        </ul>
        <div class="search_box">
          <i class="el-icon-search"></i>
          <el-input v-model="text" size="small" placeholder="搜一艘"></el-input>
          <i class="el-icon-shopping-cart-1"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HeadView",
  data() {
    return {
      text: "",
    };
  },
};
</script>

<style lang="scss" scoped>
#main {
  width:100%;
    position: sticky;
    top: 0;
  .header_box {
    width: 100%;
    height: 50px;
    background: #333333;

    ul {
      width: 1240px;
      height: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: right;
      align-items: center;

      li {
        color: #cdcdc3;
        font-size: 14px;
        padding: 0 12px;
        border-right: 1px solid rgb(136, 130, 130);
      }

      li:last-child {
        border: none;
      }
    }
  }

  .nav_box {
    width: 100vw;
    height: 130px;
    background: white;
    
    .nav_content {
      width: 1240px;
      height: 100%;
      margin: 0 auto;
      display: flex;

      .logo_box {
        width: 200px;
        height: 130px;

        img {
          width: 100%;
          margin-top: 20px;
        }
      }

      ul {
        width: 820px;
        height: 130px;
        display: flex;
        align-items: center;
        justify-content: space-around;

        li {
          font-size: 16px;
          padding: 0 20px;
        }
        li:hover {
          color: #27bb9a;
        }
      }

      .search_box {
        display: flex;
        align-items: center;

        .el-input {
          border: none;
          margin: 0 10px;
        }

        .el-icon-shopping-cart-1 {
          font-size: 24px;
        }
      }
    }
  }
}
</style>